<template>
  <view class="app">
    <view class="back-btn mix-icon icon-xiangzuo" @click="navBack"></view>
    <view class="page-tip">线路管理</view>
    <view class="top">
      <view class="item-wrap">
        <view class="item row">
          <view class="item-panel column">
            <view class="item-title">第一站点</view>
            <view class="item-subtitle">山东省临沂市兰山区</view>
            <view class="item-desc">临沂商股智慧产业园</view>
          </view>
          <view class="item-imgs row">
            <image
              class="item-img"
              src="/static/zd-edit.png"
              mode="aspectFit"
            ></image>
            <image
              class="item-img"
              src="/static/zd-delete.png"
              mode="aspectFit"
            ></image>
          </view>
        </view>
      </view>
      <view class="item-wrap">
        <view class="item row">
          <view class="item-panel column">
            <view class="item-title">兰华物流</view>
            <view class="item-subtitle">山东省临沂市兰山区</view>
            <view class="item-desc">临沂商股智慧产业园</view>
          </view>
          <view class="item-imgs row">
            <image
              class="item-img"
              src="/static/zd-edit.png"
              mode="aspectFit"
            ></image>
            <image
              class="item-img"
              src="/static/zd-delete.png"
              mode="aspectFit"
            ></image>
          </view>
        </view>
      </view>
    </view>
    <view class="fixed-btn">
      <mix-button
        ref="confirmBtn"
        text="新增站点"
        :isConfirm="false"
        @onConfirm="showCreateStation"
      ></mix-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  onLoad() {},
  methods: {
    showCreateStation() {
      this.navTo('/pages/mine/createStation');
    },
    navBack() {
      uni.navigateBack();
    },
  },
};
</script>

<style>
page {
  background: #f7f8f9;
}
</style>
<style scoped lang="scss">
.app {
  padding-top: calc(var(--status-bar-height) + 40rpx);
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-image: url('../../static/page_bg.png');
  background-repeat: no-repeat;
  background-size: 100% 600rpx;
}
.back-btn {
  position: absolute;
  left: 20rpx;
  top: calc(var(--status-bar-height) + 20rpx);
  z-index: 90;
  padding: 20rpx;
  font-size: 34rpx;
  color: white;
}
.page-tip {
  position: absolute;
  left: 50%;
  top: calc(var(--status-bar-height) + 40rpx);
  z-index: 90;
  margin-left: -40rpx;
  font-size: 34rpx;
  color: white;
  line-height: 34rpx;
}
.top {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--status-bar-height) + 52rpx);
  .item-wrap {
    width: 700rpx;
    margin: 20rpx auto 0;
    padding: 30rpx;
    background: #fff;
    border-radius: 20rpx;
    .item {
      justify-content: space-between;
      .item-panel {
        justify-content: space-between;
        .item-title {
          font-size: 34rpx;
          font-weight: bold;
          height: 60rpx;
          color: #222222;
        }
        .item-subtitle {
          font-weight: bold;
          height: 50rpx;
          color: #222222;
        }
        .item-desc {
          color: #999999;
        }
      }
      .item-imgs {
        width: 180rpx;
        justify-content: space-between;
        .item-img {
          width: 80rpx;
          height: 80rpx;
        }
      }
    }
  }
}
.fixed-btn {
  position: absolute;
  left: 0;
  bottom: 6vh;
  z-index: 1;
  width: 100%;
  height: 90rpx;
  font-size: 24rpx;
  color: #999;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
}
</style>
